<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>登录-智能家居系统</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">智能家居系统</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/pages/signup"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="/pages/signin"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row clearfix">
        <h2>登录.</h2>
        <hr/>
        <form id="loginform" class="col-md-7 column">
            <div class="form-group">
                <label for="uemail">电子邮箱</label>
                <input type="email" class="form-control" id="uemail" name="uemail"/>
            </div>
            <div class="form-group">
                <label for="upasswd">密码</label>
                <input type="password" class="form-control" id="upasswd" name="upasswd"/>
            </div>
            <button class="btn btn-default" type="submit">登录</button>
        </form>
        <div class="col-md-5 column">
        </div>
    </div>
</div>

</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/js-sha1/0.4.1/sha1.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        $("#loginform").validate({
            submitHandler: function () {
                $.post("/users/signin",
                    {
                        uemail: $("#uemail").val(),
                        upasswd: sha1($('#upasswd').val())
                    },
                    function (data) {
                        if (data == "true") {
                            location.href = "/";
                        } else {
                            $("#uemail").val("");
                            $('#upasswd').val("");
                            alert("用户名或密码错误");
                        }
                    });
            },
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            errorElement: "h6",
            rules: {
                uemail: {
                    required: true,
                    email: true
                },
                upasswd: {
                    required: true,
                    rangelength: [5, 20]
                }
            },
            messages: {
                uemail: {
                    required: "请输入电子邮件地址",
                    email: "请输入正确格式的电子邮件"
                },
                upasswd: {
                    required: "请输入密码",
                    rangelength: "密码长度范围为5-20"
                }
            }
        });
    });
</script>
<style>
    .error {
        color: #8a6d3b;
        display: inline
    }
</style>
</html>
